<template>

    <div>

        <h2>兑换列表</h2>

        <div class="container">
            <el-table
                    :data="items"
                    style="width: 100%"
                    v-loading="loading">
                <el-table-column
                        prop="id"
                        label="ID"
                >
                </el-table-column>
                <el-table-column
                        prop="user_id"
                        label="用户ID"
                >
                </el-table-column>
                <el-table-column
                        prop="money"
                        label="兑换金额"
                >
                </el-table-column>
                <el-table-column
                        prop="coupon_id"
                        label="优惠券ID"
                >
                </el-table-column>
                <el-table-column
                        prop="other_goods"
                        label="VIP卡"
                >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="收件人"
                >
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话"
                >
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="收货地址"
                >
                </el-table-column>
            </el-table>

            <el-pagination
                    ref="mainPage"
                    background
                    class="pagination"
                    layout="prev, pager, next"
                    :total="total"
                    :page-size="params.limit"
                    @current-change="setPage"
                    @prev-click="setPage"
                    @next-click="setPage"
            >
            </el-pagination>

        </div>

    </div>

</template>
<script>
    export default {
        data() {
            return {
                items: [],
                loading: true,
                goods:null,
                params: {
                    limit: 10,
                    offset: 0,
                },
                currentPage: 1,
                total: 0,
            }
        },
        created() {
            this.fetch();
        },
        methods: {
            fetch() {
                axios.get('/admin/api/mayday/list', {params: this.params}).then((res) => {
                    if (res.data.code === 0) {
                        this.items = res.data.data.items;
                        this.total = res.data.data.total;
                    } else {
                        this.$message(res.data.msg);
                    }
                    this.loading = false;
                }).catch(function() {
                    this.$message('系统错误');
                    this.loading = false;
                })
            },


            // 切换分页
            setPage: function(page) {
                this.currentPage = page;
                this.params.offset = (page - 1) * this.params.limit;
                this.fetch()
            },
            // 重新请求接口获取数据，参数发生了变化，页码重置为1
            reload: function() {
                if (this.currentPage === 1) {
                    this.fetch();
                } else {
                    this.setPage(1);
                }
            },
        }
    }
</script>